<div class="layui-tab" style="background-color: white;" id="widthHeight">
    <ul class="layui-tab-title">
        <li class="layui-this">计划书</li>
        <li>详细设计</li>
        <li>测试报告</li>
    </ul>
    <div class="layui-tab-content">
        <!--第一块-->
        <div class="widthHeight layui-tab-item layui-show">
            <div class="layui-form-item" style="margin-left: 0;max-width: 460px; padding-top: 40px;">
                <!--下拉框选择项目-->
                <div class="layui-form-item">
                    <label class="layui-form-label">负责项目</label>
                    <div class="layui-input-inline">
                        <input type="text" name="yfbGroupPeoplename" placeholder="请选择负责项目" lay-verify="propelName"
                               autocomplete="off" class="layui-input" id="select1">
                    </div>
                </div>

                <!--需求计划-->
                <div class="layui-form-item">
                    <label class="layui-form-label">需求计划书</label>
                    <div class="layui-input-block">
                        <textarea id="demandBook" style="width: 600px; height: 200px;" readonly="true"></textarea>
                    </div>
                </div>
                <!--设计计划-->
                <div class="layui-form-item">
                    <label class="layui-form-label">设计计划书</label>
                    <div class="layui-input-block">
                        <textarea id="designBook" style="width: 600px; height: 200px;" readonly="true"></textarea>
                    </div>
                </div>
                <!--测试计划-->
                <div class="layui-form-item">
                    <label class="layui-form-label" >测试计划书</label>
                    <div class="layui-input-block">
                        <textarea id="testBook" style="width: 600px; height: 200px;" readonly="true"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <!--第二块-->
        <div class="widthHeight layui-tab-item">
            <form id="form2" class="layui-form myform" style="margin: 0 auto;max-width: 460px;padding-top: 40px;"
                  enctype="multipart/form-data" method="post">
                <blockquote class="layui-elem-quote">
                    温馨提示： 温馨提示：只能上传图片和文件(xlsx|xls|jpg|png|pdf|txt|doc|docx)。可上传最大文件为52M。
                </blockquote>
                <!--下拉框选择项目-->
                <div class="layui-form-item">
                    <label class="layui-form-label">选择项目</label>
                    <div class="layui-input-inline">
                        <input type="hidden" name="yfbDesignItemId" id="yfbDesignItemId">
                        <input type="text" name="yfbGroupPeoplename" placeholder="请选择负责项目" lay-verify="propelName"
                               autocomplete="off" class="layui-input" id="select2">
                    </div>
                </div>
                <!--选择-->
                <div class="layui-form-item">
                    <label class="layui-form-label">选择分类</label>
                    <div class="layui-input-inline">
                        <input type="hidden" name="yfbDesignDevelopsort" value="开发"/>
                        <select name="yfbDesignDesignsortId" lay-filter="designTable" class="myselect">
                            <option>选择分类</option>
                            <option value="电路原理图">电路原理图</option>
                            <option value="PCB电路图">PCB电路图</option>
                            <option value="BOM清单">BOM清单</option>
                            <option value="元器件规划书">元器件规划书</option>
                        </select>
                    </div>
                </div>
                <!--上传-->
                <div class="layui-form-item">
                    <label class="layui-form-label">文件上传</label>
                    <div class="layui-input-inline">
                        <div class="layui-form-item myupload" style="display: none" id="designUpload">
                            <button type="button" class="layui-btn" id="myUpload1">
                                <i class="layui-icon">&#xe67c;</i>上传文件
                            </button>
                        </div>
                    </div>
                </div>
                <!--回显文件保存地址-->
                <div class="layui-form-item">
                    <label class="layui-form-label">文件上传</label>
                    <div class="layui-input-inline">
                        <input type="text" name="yfbDesignContent"lay-verify="propelName"
                               autocomplete="off" class="layui-input" id="yfbDesignContent">
                    </div>
                </div>
                <!--提交/重置按钮-->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    </div>
                </div>
            </form>
        </div>
        <!--第三块-->
        <div class="widthHeight layui-tab-item">
            <form id="form3" class="layui-form myform" style="margin: 0 auto;max-width: 460px;padding-top: 40px;"
                  enctype="multipart/form-data" method="post">
                <blockquote class="layui-elem-quote">
                    温馨提示：只能上传图片和文件(xlsx|xls|jpg|png|pdf|txt|doc|docx)。可上传最大文件为52M。
                </blockquote>
                <!--下拉框选择项目-->
                <div class="layui-form-item">
                    <label class="layui-form-label">选择项目</label>
                    <div class="layui-input-inline">
                        <input type="hidden" name="yfbTestItemId" id="yfbTestItemId">
                        <input type="text" name="yfbGroupPeoplename" placeholder="请选择负责项目" lay-verify="propelName"
                               autocomplete="off" class="layui-input" id="select3">
                    </div>
                </div>
                <!--选择-->
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="hidden" name="yfbTestDevelopsort" value="测试"/>
                        <select name="yfbTestTestsortId" lay-filter="testTable" class="myselect">
                            <option>选择分类</option>
                            <option value="电路装配总结报告">电路装配总结报告</option>
                            <option value="EMC装配总结报告">EMC装配总结报告</option>
                            <option value="审评验证报告">审评验证报告</option>
                        </select>
                    </div>
                </div>
                <!--上传-->
                <div class="layui-form-item" style="display: none" id="testUpload">
                    <button type="button" class="layui-btn" id="myUpload2">
                        <i class="layui-icon">&#xe67c;</i>上传文件
                    </button>
                </div>
                <!--回显文件保存地址-->
                <div class="layui-form-item">
                    <label class="layui-form-label">文件地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="yfbTestContent"lay-verify="propelName"
                               autocomplete="off" class="layui-input" id="yfbTestContent">
                    </div>
                </div>
                <!--提交/重置按钮-->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="demo2">立即提交</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['form', 'step', 'layer', 'upload', 'tableSelect', 'element', 'miniPage'], function () {
        let $ = layui.$,
            form = layui.form,
            step = layui.step,
            layer = layui.layer,
            upload = layui.upload,
            miniPage = layui.miniPage,
            element = layui.element,
            tableSelect = layui.tableSelect;

        //设置宽高
        let openWH = miniPage.getOpenWidthHeight();
        $(".widthHeight").css("width", openWH[0] + 'px');
        $(".widthHeight").css("min-height", openWH[1] + 'px');


        for (let i = 1; i <= 2; i++) {
            //上传文件
            upload.render({
                elem: '#myUpload' + i //绑定元素
                , url: '/yfb/upload/' //上传接口
                , accept: "file"
                // , acceptMime: 'image/*'  //筛选文件
                , exts: 'xlsx|xls|jpg|png|pdf|txt|doc|docx' //允许上传文件类型
                , size: 51200000  //文件上传大小
                , data: {  //其他参数
                    yfbDesignDevelopsort: function () {  //开发分类：软件/硬件
                        return "硬件";
                    },
                    designOrTest: function () {  //设计分类：设计/测试
                        if ($(".myselect").eq(0).val() == "选择分类") {
                            return $(".myselect").eq(1).prev().val();
                        }
                        if ($(".myselect").eq(1).val() == "选择分类") {
                            return $(".myselect").eq(0).prev().val();
                        }

                    },
                    yfbDesignDesignsortId: function () {  //设计分类
                        if ($(".myselect").eq(0).val() == "选择分类") {
                            return $(".myselect").eq(1).val();
                        }
                        if ($(".myselect").eq(1).val() == "选择分类") {
                            return $(".myselect").eq(0).val();
                        }
                    }
                }
                , done: function (res) {
                    //上传完毕回调
                    if (res.code == 0) {  //表示文件上传成功
                        console.log("文件上传成功");
                        layer.msg("文件上传成功");
                        //刷新form
                        form.render("select");
                        //隐藏上传操作
                        $("#designUpload").css("display", "none");
                        $("#testUpload").css("display", "none");
                        //将地址放回显出来
                        $("#testAddress" + i + "").text(res.data);
                    }
                }
                , error: function () {
                    console.log("文件上传失败");
                    //请求异常回调
                    layer.msg("文件上传失败");
                    //刷新form
                    form.render();
                    //隐藏上传操作
                    $("#designUpload").css("display", "none");
                    $("#testUpload").css("display", "none");
                }
            });
        }


        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();


        //监听设计表下拉
        form.on("select(designTable)", function (obj) {
            if (obj.value == "选择分类") {
                $("#designUpload").css("display", "none");
            } else {
                $("#designUpload").css("display", "block");
            }
        });

        //监听测试表下拉
        form.on("select(testTable)", function (obj) {
            if (obj.value == "选择分类") {
                $("#testUpload").css("display", "none");
            } else {
                $("#testUpload").css("display", "block");
            }
        });

        //第一块的项目选择
        tableSelect.render({
            elem: '#select1',
            checkedKey: 'userId',
            searchKey: 'keyword',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '关键词搜索',	//搜索输入框的提示文字 默认关键词搜索
            table: {
                url: '/yfb/queryItemByUser',  //请求
                page: true,  //开启分页
                limit: 3,
                limits: [3, 6, 9],  //可以选择分页
                cols: [[
                    {type: 'radio'},
                    {field: 'yfbItemNumber', title: '项目编号'},
                    {field: 'yfbItemName', title: '项目名'},
                    {field: 'yfbItemStatus', title: '项目状态'},
                    {field: 'yfbItemCreatetime', title: '创建时间'},
                    {field: 'yfbItemFirstVersion', title: '启动版本'},
                ]]
            },
            done: function (elem, data) {
                //选择完后的回调，包含2个返回值
                // elem:返回之前input对象；
                // data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                var NEWJSON = [];
                //计划书
                let myBooks = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.yfbItemName);  //遍历项目名
                    myBooks.push(item.yfbBooks);
                });
                //将选中项目名放到选项中
                elem.val(NEWJSON.join(","));
                //将选中项目的各种计划书的内容赋值给文本框
                $("#demandBook").text(myBooks[0][0].yfbBookContent);
                $("#designBook").text(myBooks[0][1].yfbBookContent);
                $("#testBook").text(myBooks[0][2].yfbBookContent);
            }
        });
        //第二块的项目选择
        tableSelect.render({
            elem: '#select2',
            checkedKey: 'userId',
            searchKey: 'keyword',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '关键词搜索',	//搜索输入框的提示文字 默认关键词搜索
            table: {
                url: '/yfb/queryItemByUser',  //请求
                page: true,  //开启分页
                limit: 3,
                limits: [3, 6, 9],  //可以选择分页
                cols: [[
                    {type: 'radio'},
                    {field: 'yfbItemNumber', title: '项目编号'},
                    {field: 'yfbItemName', title: '项目名'},
                    {field: 'yfbItemStatus', title: '项目状态'},
                    {field: 'yfbItemCreatetime', title: '创建时间'},
                    {field: 'yfbItemFirstVersion', title: '启动版本'},
                ]]
            },
            done: function (elem, data) {
                var NEWJSON = [];
                //计划书
                let id = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.yfbItemName);  //遍历项目名
                    id.push(item.yfbItemId);
                });
                //将选中项目名放到选项中
                elem.val(NEWJSON.join(","));
                //将选中项目的各种计划书的内容赋值给文本框
                $("#yfbDesignItemId").val(id);
                console.log(id);
            }
        });
        //第三块的项目选择
        tableSelect.render({
            elem: '#select3',
            checkedKey: 'userId',
            searchKey: 'keyword',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '关键词搜索',	//搜索输入框的提示文字 默认关键词搜索
            table: {
                url: '/yfb/queryItemByUser',  //请求
                page: true,  //开启分页
                limit: 3,
                limits: [3, 6, 9],  //可以选择分页
                cols: [[
                    {type: 'radio'},
                    {field: 'yfbItemNumber', title: '项目编号'},
                    {field: 'yfbItemName', title: '项目名'},
                    {field: 'yfbItemStatus', title: '项目状态'},
                    {field: 'yfbItemCreatetime', title: '创建时间'},
                    {field: 'yfbItemFirstVersion', title: '启动版本'},
                ]]
            },
            done: function (elem, data) {
                var NEWJSON = [];
                //计划书
                let id = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.yfbItemName);  //遍历项目名
                    id.push(item.yfbItemId);
                });
                //将选中项目名放到选项中
                elem.val(NEWJSON.join(","));
                //将选中项目的各种计划书的内容赋值给文本框
                $("#yfbTestItemId").val(id);
                console.log(id);
            }
        });

        //监听第二块提交。
        form.on('submit(demo1)', function (data) {
            layer.confirm('确认提交？', function (index) {
                $.get("/yfb/addDesign",
                    $("#form2").serialize(),
                    function (result) {
                        if(result.code == 0) {  //成功
                            form.render();
                            //关闭当前弹出窗
                            layer.closeAll();
                            layer.msg("添加成功");
                        }
                    },"json");
            });
            return false;
        });
        //监听第三块提交。
        form.on('submit(demo2)', function (data) {
            layer.confirm('确认提交？', function (index) {
                $.get("/yfb/addTest",
                    $("#form2").serialize(),
                    function (result) {
                        if(result.code == 0) {  //成功
                            form.render();
                            //关闭当前弹出窗
                            layer.closeAll();
                            layer.msg("添加成功");
                        }
                    },"json");
            });
            return false;
        });


    });


</script>